<template>
	<view class="wrap">
		<view class="nav-wrap">
			<view class="nav-title">
				<image class="logo" src="https://cdn.uviewui.com/uview/common/logo.png" mode="widthFix"></image>
				<view class="nav-info">
					<view class="nav-title__text">{{ $t('common.title') }}</view>
					<view class="nav-slogan">{{ $t('common.intro') }}</view>
				</view>
				<view class="lang" @click="switchLang"><u-icon size="48" color="warning" :name="lang"></u-icon></view>
			</view>
			<view class="nav-desc">{{ $t('common.desc') }}</view>
		</view>
		<view class="list-wrap">
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list" :key="index">
				<u-cell-item :titleStyle="{ fontWeight: 500 }" @click="openPage(item1.path)" :title="getFieldTitle(item1)" v-for="(item1, index1) in item.list" :key="index1">
					<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
				</u-cell-item>
			</u-cell-group>
		</view>
		<u-gap height="100"></u-gap>
	</view>
</template>

<script>
import list from './control.config.js';
export default {
	data() {
		return {
			list: list,
			desc: '众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让你快速集成，开箱即用。'
		};
	},
	computed: {
		getIcon() {
			return path => {
				return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
			};
		},
		lang() {
			return this.$i18n.locale == 'en' ? 'en' : 'zh';
		}
	},
	onShow() {
		uni.setNavigationBarTitle({
			title: this.$t('nav.components')
		});
	},
	created() {},
	methods: {
		// switchLang() {
		// 	this.$i18n.locale = this.$i18n.locale == 'en' ? 'zh' : 'en';
		// 	uni.setNavigationBarTitle({
		// 		title: this.$t(this.title)
		// 	});
		// },
		switchLang() {
			this.$i18n.locale = this.$i18n.locale == 'en' ? 'zh-Hans' : 'en';
			console.log('this.$i18n.locale==', this.$i18n.locale);
			if (this.$u.os() == 'android') {
				uni.showModal({
					content: this.$t('tabbar.component'),
					success: res => {
						if (res.confirm) {
							uni.setLocale(this.$i18n.locale);
						}
					}
				});
			} else {
				uni.setLocale(this.$i18n.locale);
			}
			uni.setNavigationBarTitle({
				title: this.$t('tabbar.component')
			});
		},
		openPage(path) {
			this.$u.route({
				url: path
			});
		},
		getGroupTitle(item) {
			return this.$i18n.locale == 'zh-Hans' ? item.groupName : item.groupName_en;
		},
		getFieldTitle(item) {
			return this.$i18n.locale == 'zh-Hans' ? item.title : item.title_en;
		}
	}
};
</script>

<style>
page {
	background-color: rgb(255, 255, 255);
}
</style>

<style lang="scss" scoped>
.wrap {
	padding-top: 80rpx;
}
.nav-wrap {
	padding: 15px;
	position: relative;
}

.lang {
	position: absolute;
	top: 15px;
	right: 15px;
}

.nav-title {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
}

.nav-info {
	margin-left: 15px;
}

.nav-title__text {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	color: $u-main-color;
	font-size: 25px;
	font-weight: bold;
}

.logo {
	width: 70px;
	/* #ifndef APP-NVUE */
	height: auto;
	/* #endif */
}

.nav-slogan {
	color: $u-tips-color;
	font-size: 14px;
}

.nav-desc {
	margin-top: 10px;
	font-size: 14px;
	color: $u-content-color;
}
.u-cell-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 8rpx;
}
</style>
